<header class="border-b">
    <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
        <a href="/" class="text-xl font-semibold">ShenZhen Boat</a>
        <nav class="space-x-4 text-sm">
            <a class="hover:text-emerald-700" href="/">{{ _('首页') }}</a>
             <a class="hover:text-emerald-700" href="{{ url_for('front.category', slug='yu-zhuo') }}">{{ _('玉镯') }}</a>
            <a class="hover:text-emerald-700" href="{{ url_for('front.category', slug='diao-zhui-gua-shi') }}">{{ _('吊坠挂饰') }}</a>
            <a class="hover:text-emerald-700" href="{{ url_for('front.category', slug='shou-lian-xiang-lian') }}">{{ _('手链项链') }}</a>
            <a class="hover:text-emerald-700" href="{{ url_for('front.category', slug='jie-zhi-ban-zhi') }}">{{ _('戒指扳指') }}</a>
            <a class="hover:text-emerald-700" href="{{ url_for('front.category', slug='er-shi') }}">{{ _('耳饰') }}</a>
            <span class="inline-block h-5 w-px bg-gray-300 mx-1 align-middle"></span>
            <a class="hover:text-emerald-700" href="{{ url_for('front.set_lang', lang='zh') }}">中文</a>
            <a class="hover:text-emerald-700" href="{{ url_for('front.set_lang', lang='en') }}">EN</a>
            {% if current_user.is_authenticated %}
                <span class="text-sm">{{ _('您好，') }}</span>
                <a href="{{ url_for('front.account_profile') }}" class="text-emerald-700 hover:underline">
                    {{ current_user.username }}
                </a>
                <span class="mx-2">|</span>
                <a class="hover:text-emerald-700" href="{{ url_for('front.logout') }}">{{ _('退出') }}</a>
            {% else %}
                <a class="hover:text-emerald-700" href="{{ url_for('front.login', next=request.full_path|default('/', true)) }}">Login</a>
                <a class="hover:text-emerald-700" href="{{ url_for('front.register', next=request.full_path|default('/', true)) }}">Register</a>
            {% endif %}
        </nav>

    </div>
</header>